<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户移动端</title>
    <link href="/chat/service/js/layui/css/layui.mobile.css" rel="stylesheet"/>
    <link href="/chat/service/js/layui/css/modules/layim/mobile/layim.css" rel="stylesheet"/>
    <style>
        .suggest-info-detail span {
            display: block;
            line-height: 30px;
            padding: 0 15px;
            border-radius: 3px;
            background-color: color: transparent;
            color: black;
            font-size: 14px;
            cursor: pointer;
        }

        .suggest-info-detail span em {
            font-size: 10px;
            color: brown;
        }

        .layui-layim-quan li {
            margin: 3%;
            color: brown;
            font-weight: 600;
            background-color: antiquewhite;
        }

        .layim-chat-quan {
            position: relative;
            min-height: 22px;
            line-height: 22px;
            margin-top: 25px;
            padding: 8px 15px;
            border-radius: 3px;
            word-break: break-all;
            display: inline-block;
            vertical-align: top;
            font-size: 15px;
            margin-left: 0;
            text-align: left;
            background-color: red;
            color: #fff;
        }

        .layim-chat-quan-zhekou {
            font-size: 10px;
        }

        .layim-chat-quan-lingqu {
            border-radius: 3px;
            height: 40px;
            padding: 0 25px;
            border: none 0;
            margin-left: 10px;
            background-color: red;
            color: #fff;
        }

        .layim-chat-quan-lingqu button {
            border-radius: 3px;
            height: 40px;
            padding: 0 20px;
            border: none 0;
            margin-left: 10px;
            background-color: darkorange;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="layim-panel layui-m-anim-left">
    <div class="layim-title" style="background-color: #36373C;">
        <p><i class="layui-icon layim-chat-back" onclick="loginOut()">&#xe603;</i> <span id="title">客服未接入...</span>
        </p>
    </div>
    <div class="layui-unselect layim-content">
        <div class="layim-chat layim-chat-friend">
            <div class="layim-chat-main">
                <ul id="suggest-info">
                    <li class="suggest-info-detail" style="padding-right: 60px; position: fixed;z-index: 999999;">
                        <span>客户昵称 : <em>客户昵称</em></span>
                        <span>评价时间 : <em>评价时间</em></span>
                        <span>评价内容 : <em>评价内容</em></span>
                    </li>
                </ul>
                <ul id="chat-list"></ul>
            </div>
            <div class="layim-chat-footer">
                <div class="layim-chat-send">
                    <input type="text" autocomplete="off" id="msg"/>
                    <button class="layim-send" id="send">发送</button>
                </div>
                <div class="layim-chat-tool">
                    <span class="layui-icon layim-tool-face" title="选择表情" id="up-face">&#xe60c;</span>
                    <span class="layui-icon layim-tool-image" title="上传图片" id="up-image">&#xe60d;</span>
                    <!--<span class="layui-icon layim-tool-image" title="发送文件"></span>-->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-m-layerchild layim-layer layui-m-anim-scale">
    <div class="layui-m-layercont" style="display:none;padding:0" id="face-box">

    </div>
</div>

<script src="/chat/service/js/jquery-1.9.0.min.js"></script>
<script src="/chat/service/js/jquery.cookie.js"></script>
<script src="/chat/service/js/layui/layui.js"></script>
<script>
    var config = {
        user_id: "",
        username: "",
        head_img: '',
        role: 'visitor',
        group_id: 0,
        chat_type: 0,
    };
    // 是否点击显示表情的标志
    var flag = 1;
    var i = 0;
    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    var wsServer = 'ws://' + document.domain + ':9502';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (e) {
        // 登录
        send_ws('chat_join');
    };

    websocket.onclose = function (e) {
        console.log("Disconnected");
    };

    websocket.onmessage = function (e) {
        console.log(e.data);
        return false;
        // json数据转换成js对象
        var data = eval("(" + e.data + ")");
        var type = data.type || '';
        switch (type) {
            case 'init':
                // if (document.domain == 'www.isaveu.cn') {
                //     var init_url = 'https://' + document.domain + '/human/api.index/bind';
                // } else {
                //     var init_url = 'http://' + document.domain + '/human/api.index/bind';
                // }
                // // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                // $.post(
                //     init_url
                //     , {
                //         client_id: data.client_id,
                //         access_token: access_token
                //     }
                //     , function (res) {
                //         console.log(res.data);
                //     }
                //     , 'json');
                break;
            case 'call'://呼叫服务
                $("input[name='service_cont_id']").val(data.service_cont_id);
                $("input[name='box_id']").val(data.box_id);
                console.log(data);
                break;
            case 'admit'://接单
                console.log(data);
                break;
            case 'watch_login'://手表绑定
                console.log(data);
                break;
            case 'pager'://呼叫器呼叫.
                layer.msg(data.msg);
                $("input[name='service_cont_id']").val(data.service_cont_id);
                $("input[name='box_id']").val(data.box_id);
                console.log(data);
                break;
            case 'ping':
                //ws.send('{"type":"pong"}');
                break;
            case 'chat_join':// 服务端
                if (data.from.username != config.username) {
                    var text_title = data.from.username + ' 加入聊天';
                    $('#title').text(text_title);
                    var _html = '<li class="layim-chat-system"><span>' + data.from.username + ' 加入聊天</span></li>';
                    $('#chat-list').append(_html);
                }
                var chat_html = $('#chat-list').html();
                if (chat_html === '') {
                    for (var i in data.data) {
                        chatAppend(data.data[i]);
                    }
                }
                break;
            case 'chat_message'://聊天记录返回
                chatAppend(data.data);
                break;
            case 'receive_quan'://领取优惠券
                var html = '<button id="lingqud">已领取优惠券</button>';
                $('#' + data.chat_id + ' .layim-chat-quan-lingqu').html(html);
                break;
            default : // 当mvc框架调用GatewayClient发消息时直接alert出来
                //console.log('当mvc框架调用GatewayClient发消息');
                break;
        }
    };

    websocket.onerror = function (evt, e) {
        var html = '<li class="layim-chat-system">\n' +
            '         <span>连接失败。</span>\n' +
            '       </li>';
        $('#chat-list').html(html);
    };

    /**
     * ws发送消息
     * @param type 发送类型 chat_join,chat_message
     * @param content 内容
     * @param types 发送内容的类型 0:文本 1:图片,2:优惠券
     */
    function send_ws(type, content = null, types = 0) {
        var send_data = {
            type: type,
            chat_type: config.chat_type,
            group_id: config.group_id,
            user_id: config.user_id,
            username: config.username,
            head_img: config.head_img,
            types: types,
            content: content
        };
        send_data = JSON.stringify(send_data);
        console.log(send_data);
        websocket.send(send_data);
        $('#msg').val('');
    }
</script>
<script src="/chat/service/js/tooljs.js"></script>
</body>
</html>